import React from 'react';
import { useDrag, DragSourceMonitor } from 'react-dnd';

const ItemTypes = {
	BOX: 'box'
};


export default function DragItem( props: any ) {
	let { name, id, children, dragItem } = props;
	const [ { isDragging }, drag ] = useDrag( {
		item: { type: ItemTypes.BOX, id, name: name },
		collect: ( monitor ) => ( {
			isDragging: monitor.isDragging() ? 0.5 : 1
		} ),
		begin: ( monitor: DragSourceMonitor ) => {
			return monitor.getItem();
		},
		end: ( item: any, monitor: DragSourceMonitor ) => {
			const dropResult = monitor.getDropResult();
			if ( item && dropResult ) {
				props.handlePush( dragItem );
			}
		},
	} );
	return (
		<div ref={drag} style={{ opacity: isDragging }}>
			{children}
		</div>
	);
}
 